<template>
    <!-- 导航区域 -->
    <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="0">
            <template slot="title">
                <i class="el-icon-s-home"></i>
                <span slot="title">首页</span>
            </template>
        </el-menu-item>

        <!-- 
            遍历menuList        v-for,唯一键绑定menu.name
            子集menu.children   v-for,跳转绑定menu.children[x].path
         -->
        <el-submenu default-active="SysManga" :index="menu.name" v-for="menu in menuList">
            <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{ menu.title }}</span>
            </template>
            <router-link :to="item.path" v-for="item in menu.children">
                <el-menu-item :index="item.name">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </template>
                </el-menu-item>
            </router-link>
        </el-submenu>
    </el-menu>
</template>

<script>
export default {
    data() {
        return {
            menuList: [
                {
                    name: 'SysManga',
                    title: '系统管理',
                    icon: 'el-icon-s-operation',
                    path: '',
                    component: '',
                    children: [
                        {
                            name: 'User',
                            title: '用户管理',
                            icon: 'el-icon-s-custom',
                            path: '/home/system/user',
                            children: [],
                        },
                        {
                            name: 'Role',
                            title: '角色管理',
                            icon: 'el-icon-rank',
                            path: '/home/system/role',
                            children: [],
                        },
                        {
                            name: 'Menu',
                            title: '菜单管理',
                            icon: 'el-icon-menu',
                            path: '/home/system/menu',
                            children: [],
                        },
                    ],
                },
                {
                    name: 'SysTools',
                    title: '系统工具',
                    icon: 'el-icon-s-tools',
                    path: '',
                    children: [
                        {
                            name: 'SysDict',
                            title: '数字字典',
                            icon: 'el-icon-s-order',
                            path: '/home/tool/dict',
                            children: [],
                        },
                    ],
                },
            ],
        }
    },
}
</script>
<style lang="scss" scoped>
// 左侧-导航
.el-menu {
    height: 100%;
}
</style>
